<template>
    <section>
        <canvas ref="cav" class="border"></canvas>
    </section>
</template>

<script>

    /**
     *@Description:画贝塞尔曲线
     *@author ZY
     *@date 2022/11/20 21:38
     */
    export default {
        name: "canvas-bessel",
        data() {
            return {}
        },
        mounted() {
            this.main()
        },
        methods: {
            main() {
                let that = this
                // // 画二次贝塞尔曲线 气泡
                let drawBesselCanvas = this.$refs.cav
                drawBesselCanvas.height = 400
                drawBesselCanvas.width = 600
                let drawBesselCanvasCtx = drawBesselCanvas.getContext('2d')
                this.drawBessel(drawBesselCanvasCtx)
            },


            // 二次贝塞尔曲线 气泡
            drawBessel(ctx) {
                let heartPath = new Path2D()

                //二次曲线
                ctx.moveTo(200, 300)//起点
                ctx.quadraticCurveTo(150, 300, 150, 200)
                ctx.quadraticCurveTo(150, 100, 300, 100)
                ctx.quadraticCurveTo(450, 100, 450, 200)
                ctx.quadraticCurveTo(450, 300, 250, 300)
                ctx.quadraticCurveTo(250, 400, 150, 400)
                ctx.quadraticCurveTo(200, 400, 200, 300)
                ctx.strokeStyle = 'red'
                ctx.stroke()
                ctx.font = '26px  幼圆'
                ctx.fillText('今天你吃饭了么？', 200, 210)

                //三次贝塞尔曲线 爱心
                heartPath.moveTo(400, 160)//起点
                heartPath.bezierCurveTo(
                    500, 80,
                    600, 200,
                    400, 350)
                heartPath.moveTo(400, 160)//起点
                heartPath.bezierCurveTo(
                    300, 90,
                    200, 200,
                    400, 350)

                // ctx.fillStyle = 'red'
                // ctx.fill(heartPath)
                ctx.strokeStyle = 'red'
                ctx.stroke(heartPath)

            }

        }
    }
</script>

<style lang="scss" scoped>
    .border {
        border: 1px solid #dbdbdb;
        border-radius: 5px;
        overflow: hidden;
    }
</style>
